<template>
  <div class="page-tem">
    <wd-tabs v-model="tab" sticky custom-class="wd-tabs-custom" style="width: auto">
      <wd-tab title="商品">
        <ProductList :keyword="props.keyword"></ProductList>
      </wd-tab>
      <wd-tab title="设计师">
        <DesignerList :keyword="props.keyword"></DesignerList>
      </wd-tab>
    </wd-tabs>
  </div>
</template>
<script setup lang="ts">
import { ref} from 'vue';
import ProductList from '@/pages/search/ProductList.vue';
import DesignerList from '@/pages/search/DesignerList.vue';
const tab = ref('设计师');

const props = defineProps({
  keyword: {
    type: String,
    default: '',
  },
});
</script>
<style lang="scss">
.page-tem {
  background: #f3f7f8;
  box-sizing: border-box;
}

.page-tem .content {
  width: calc(100vw);
  box-sizing: border-box;
  .filter-nav {
    display: flex;
    justify-content: space-between;
    height: 64rpx;
    background: #ffffff;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    padding: 0 32rpx;
    border-top: 1rpx solid #e4e4e4;
    box-sizing: border-box;
    .filter-nav-item {
      display: flex;
      align-items: center;
      height: 64rpx;
      font-weight: 400;
      font-size: 24rpx;
      line-height: 64rpx;
      text-align: left;
      color: #6f6f6f;
      &.active {
        color: #f25a27;
      }
      image {
        width: 10rpx;
        height: 14rpx;
        margin-left: 8rpx;
      }
      .sort-icon {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
    }
  }
}

.page-tem .product-content {
  background: #f3f7f8;
  padding: 16rpx;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
}
.page-tem .product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 16rpx;
  padding: 24rpx 16rpx;
  background: #fff;
}

.page-tem .designer-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 16rpx;
  padding: 24rpx 0;
  background: #f3f7f8;
}
</style>

<style lang="scss">
.wd-tabs-custom {
  width: auto !important;
}
</style>
